<template>
  <view class="container">
    <view class="login-box">
      <view class="title">微信聊天</view>
      <view class="subtitle">输入用户名开始聊天</view>
      
      <view class="input-group">
        <input 
          v-model="username" 
          class="username-input" 
          placeholder="请输入用户名"
          @confirm="handleLogin"
        />
      </view>
      
      <button class="login-btn" @click="handleLogin">进入</button>
      
      <view class="tip">
        <text>输入任意用户名即可开始聊天</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../utils/api.js'

export default {
  data() {
    return {
      username: ''
    }
  },
  onLoad() {
    // 检查是否已登录
    const userId = uni.getStorageSync('userId')
    const username = uni.getStorageSync('username')
    if (userId && username) {
      // 已登录，直接跳转到聊天列表
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  },
  methods: {
    async handleLogin() {
      const username = this.username.trim()
      
      if (!username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return
      }
      
      if (username.length < 2) {
        uni.showToast({
          title: '用户名至少2个字符',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '登录中...'
      })
      
      try {
        // 调用后端登录/注册接口
        const res = await api.loginOrRegister(username)
        
        if (res.statusCode === 200 && res.data) {
          // 保存用户信息到本地
          uni.setStorageSync('userId', res.data.id)
          uni.setStorageSync('username', res.data.username)
          
          uni.hideLoading()
          
          // 跳转到聊天列表
          uni.reLaunch({
            url: '/pages/index/index'
          })
        } else {
          throw new Error('登录失败')
        }
      } catch (e) {
        console.error('登录失败', e)
        uni.hideLoading()
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 48rpx;
  color: #000000;
  text-align: center;
  margin-bottom: 16rpx;
  font-weight: bold;
}

.subtitle {
  font-size: 28rpx;
  color: #999999;
  text-align: center;
  margin-bottom: 60rpx;
}

.input-group {
  margin-bottom: 40rpx;
}

.username-input {
  width: 100%;
  height: 88rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  border: 2rpx solid #e5e5e5;
  box-sizing: border-box;
}

.username-input:focus {
  border-color: #07c160;
  background-color: #ffffff;
}

.login-btn {
  width: 100%;
  height: 88rpx;
  background-color: #07c160;
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 32rpx;
  line-height: 88rpx;
  text-align: center;
  border: none;
  margin-bottom: 30rpx;
}

.login-btn::after {
  border: none;
}

.tip {
  text-align: center;
}

.tip text {
  font-size: 24rpx;
  color: #999999;
}
</style>

